<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>发送验证码</button>
    <script>
        // 定时器的名字
        var timer = null;
        /* 
            1. 第一次点击发送验证
                按钮的文本 =>   "再次发送5(s)" ,定义一个变量 var time = 5;
            2. 因为文本是按照一定时间规律在走,所以我们使用定时器,因为我们等下关闭定时器,所以我们给定时器取一个名字
                timer = setInterval(function(){

                },1000)
            3. 当第二次定时器 => "再次发送4(s)",后面一次类推,一直到0s的时候,就发送完毕(停止定时器),所以在定时器当中
                将次数--
                定时器走完的时候,恢复html值
                timer = setInterval(function(){
                    time--;
                    //在定时器走的过程当中,定时的文本也是一个在变化的
                    btn.innerHTML = `再次发送${time}(s)`
                    if(time < 0){
                        //停止定时器
                        clearInterval(timer)
                        timer = null;//走完最好将定时器给地址释放一下
                        btn.innerHTML = "再次发送验证码"
                    }
                },1000)
        */
        var flag = true;
        //获取这个标签
        var btn = document.querySelector("button")
        btn.onclick = function(){
            /* 
                点击就是创建了一个定时器,那我们就不要让创他一直的创建定时器,只有等到我前面那个定时器被销毁了之后,才可以创建定时器
                开关思想:
                    默认开关是打开的 
                    判断开关,开始是打开的是可以往后面走,开始是关闭,停止往后走
                    只要我点击一下创建定时器,我都要将开关关闭

                    打开开关是一定是上一个定时器被销毁了
            */
            if(flag === false) return;
            flag = false;//第一次进来了,关闭开关,后面再点击就没用了,一直要等到定时器被销毁了(flag = true)
            
            var time = 5 //一个定时器只能循环的走5次
            btn.innerHTML =  `再次发送5(s)`//第一次点击的有变化
            timer = setInterval(function(){
                time--;
                //在定时器走的过程当中,定时的文本也是一个在变化的
                btn.innerHTML = `再次发送${time}(s)`
                if(time <= 0){
                    //停止定时器
                    clearInterval(timer)
                    timer = null;//走完最好将定时器给地址释放一下
                    btn.innerHTML = "再次发送验证码"

                    flag = true;
                }
            },1000)
        }
    </script>
</body>
</html>